<template>
	<view class="sh-grid-box mb10" style="position: relative;">
		<view class="tool-item y-f" v-for="(menu, index) in detail.list" :key="index" @tap.stop="jump(menu)">
			<image class="tool-img" :src="menu.image" mode="aspectFill"></image>
			<text class="item-title">{{ menu.name }}</text>
			<!-- <view class="" @click.stop><button open-type="share" class="btn"></button></view> -->
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			routerTo: this.$tools.routerTo,
			id: '',
		};
	},
	computed: {},
	props: {
		detail: {
			type: Object,
			default: null,
		},
	},
	onLoad() {
		var userInfo = uni.getStorageSync('userInfo');
		this.id = userInfo.id;
	},
	onShareAppMessage(res) {
		//发送给朋友
		return {
			//title: '考拉妈妈邀请你赚钱, 邀请码:' + this.id, // 默认是小程序的名称(可以写slogan等)
			path: '/pages/index/index?share_id=' + this.id, // 默认是当前页面，必须是以‘/’开头的完整路径
			//imageUrl: 'https://s3.ax1x.com/2021/01/04/sPoBfH.jpg', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
		};
	},
	methods: {
		jump(data) {
			console.log(data.path)
			this.$tools.routerTo(data.path);
		},
	},
};
</script>

<style lang="scss">
.btn {
	position: absolute;
	top: 0;
	right: 20rpx;
	width: 150rpx;
	height: 150rpx;
	opacity: 0;
	//background-color: #0081ff;
}
// 宫格
.sh-grid-box {
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 40rpx;

	.tool-item {
		width: (750rpx/4);
		padding-top: 40rpx;

		.tool-img {
			width: 44rpx;
			height: 44rpx;
			// background: #ccc;
		}

		.item-title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			line-height: 24rpx;
			padding-top: 30rpx;
		}
	}
}
</style>
